<template>
  <div id="daily" class="daily" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    const vm = this
    vm.init()
    window.addEventListener('resize', vm.winResize)
  },
  beforeDestroy() {
    const vm = this
    window.removeEventListener('resize', vm.winResize)
  },
  methods: {
    init() {
      const vm = this
      vm.myChart = echarts.init(document.getElementById('daily'))
      vm.myChart.setOption(vm.getOption())
    },
    winResize() {
      const vm = this
      vm.myChart && vm.myChart.resize()
    },
    getOption() {
      return {
        title: {
          text: '每日任务字数统计'
        },
        color: ['#5B9BD5', '#FFC000'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['任务数', '字数']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: [
              'Jan',
              'Feb',
              'Mar',
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '任务数',
            min: 0,
            max: 150
          },
          {
            type: 'value',
            name: '字数',
            min: 0,
            max: 1500
            // axisLabel: {
            //   formatter: '{value} 个'
            // }
          }
        ],
        series: [
          {
            name: '任务数',
            type: 'bar',
            barGap: 0,
            data: [0, 150]
          },
          {
            name: '字数',
            type: 'bar',
            data: [0, 1000],
            yAxisIndex: 1
          }
        ]
      }
    }
  }
  // mounted() {
  //   var myChart = echarts.init(document.getElementById('daily'))
  //   window.onresize = function () {
  //     myChart.resize()
  //   }
  //   // 绘制图表
  // myChart.setOption({
  //   title: {
  //     text: '每日任务字数统计'
  //   },
  //   color: ['#5B9BD5', '#FFC000'],
  //   tooltip: {
  //     trigger: 'axis'
  //   },
  //   legend: {
  //     data: ['任务数', '字数']
  //   },
  //   calculable: true,
  //   xAxis: [
  //     {
  //       type: 'category',
  //       data: [
  //         'Jan',
  //         'Feb',
  //         'Mar',
  //         'Apr',
  //         'May',
  //         'Jun',
  //         'Jul',
  //         'Aug',
  //         'Sep',
  //         'Oct',
  //         'Nov',
  //         'Dec'
  //       ]
  //     }
  //   ],
  //   yAxis: [
  //     {
  //       type: 'value',
  //       name: '任务数',
  //       min: 0,
  //       max: 150
  //     },
  //     {
  //       type: 'value',
  //       name: '字数',
  //       min: 0,
  //       max: 1500
  //       // axisLabel: {
  //       //   formatter: '{value} 个'
  //       // }
  //     }
  //   ],
  //   series: [
  //     {
  //       name: '任务数',
  //       type: 'bar',
  //       barGap: 0,
  //       data: [0, 150]
  //     },
  //     {
  //       name: '字数',
  //       type: 'bar',
  //       data: [0, 1000],
  //       yAxisIndex: 1
  //     }
  //   ]
  // })
  // }
}
</script>

<style lang="scss" scoped>
.daily {
  width: 100%;
  height: 400px;
}
</style>
